<template>
  <div id="app-container">
    <!--条件查询表单--><h3>团队详情</h3>
    <el-form :inline="true" class="demo-form-inline">

<!--详情信息-->
        <el-form :model="fom" label-width="120px" >
          <el-row>

          </el-row>
          <el-row>

            <el-col :span="12">
              <el-form-item label="团队名称:" prop="name">
                <span>{{fom.name}}</span>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="团队编号:" prop="id">
                <span>{{fom.id}}</span>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="团队头像" prop="img">


                  <img v-if="fom.img" :src="fom.img" class="avatar"  width="50px"/>


              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="机构地址:" prop="jgAddress">
                <span>{{fom.jgAddress}}</span>
              </el-form-item>
            </el-col>

            <el-col :span="9">
              <el-form-item label="项目评分" prop="grade">
<!--                <span>:{{fom.grade}}</span>-->

                <el-rate
                  v-model="fom.grade"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}">
                </el-rate>


              </el-form-item>
            </el-col>

            <el-col :span="9">
              <el-form-item label="签约人数:" prop="num">
                <span>{{fom.num}}</span>
              </el-form-item>
            </el-col>
          </el-row>



          <el-form-item label="状态" prop="status">
              <el-switch
                v-model="fom.status"
                active-text="启用"
                inactive-text="未启用"
                active-value = "1"
                  inactive-value= "0"
              >

              </el-switch>
          </el-form-item>


        </el-form>
    </el-form>


    <h3>团队成员</h3>
    <!--数据显示列表-->
    <div >

        <div v-for="data in dataTeamList" :key="data.id">
          <div  style=" width: 350px;height: 150px; float: left; margin-right: 10px;background-color: lightpink ;border-radius:21px;padding-top: 20px;
padding-right: 13px;
padding-bottom: 40px;
padding-left: 13px;" >
            <router-link  :to="'/doctorDetail/'+data.id">
              <div style=" width: 350px;height: 150px;">
                <span >{{data.name}}</span>
<!--               <span v-for="lab in labels" :key="lab">{{lab}}</span><br>-->
                <span>{{getLabel(data.labelId)}}</span><br>

                <span>签约人数：{{data.collectNum}}</span><br>
              </div>
            </router-link>
            <!--            <router-link  :to="'/package/detail/'+data.id">-->
<!--            </router-link>-->
            </router-link>
          </div>
        </div>
        <div style="width: 350px;height: 150px;"></div>
    </div>
    <h3>服务包</h3>

    <div >

      <div v-for="data in packages" :key="data.id">
        <div  style=" width: 350px;height: 150px; float: left; margin-right: 10px;background-color: darkseagreen ;border-radius:21px;padding-top: 20px;
padding-right: 13px;
padding-bottom: 40px;
padding-left: 13px;" >
          <router-link  :to="'/package/detail/'+data.id">
          <div style=" width: 350px;height: 150px;">
            <span>{{data.name}}</span><br>
            <span>服务对象：{{data.object}}</span><br>
            <span>服务标签：xxxx</span><br>
          </div>
          </router-link>
          <!--            <router-link  :to="'/package/detail/'+data.id">-->
          <!--            </router-link>-->
        </div>
      </div>
      <div style="width: 350px;height: 150px;"></div>
    </div>

    <el-button @click="editFormView=true" style="background-color: #1482f0">编辑团队</el-button>

    <div class="edit-form">
    <el-dialog title="编辑项目" :visible.sync="editFormView">
      <el-form :model="fom" ref="editForm" label-width="100px" >
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目名称" prop="name">
              <el-input v-model="fom.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属机构">
              <el-select v-model="organization.id" clearable placeholder="请选择">
                <el-option
                  v-for="item in organization"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>

          <el-col :span="12">
            <el-form-item label="团队头像" prop="img">

              <el-upload
                height="50px"
                name="file"
                class="avatar-uploader"
                action="http://localhost:8080/upload/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="fom.img" :src="fom.img" class="avatar"  width="50px"/>
                <i v-else class="el-icon-plus avatar-uploader-icon"  id="icon1"></i>
              </el-upload>

            </el-form-item>
          </el-col>

        </el-row>



        <el-row>
          <el-col :span="12">
              <el-form-item label="团队标签">
                <el-select v-model="labelbj.id" clearable placeholder="请选择">
                  <el-option
                    v-for="item in labelbj"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
          </el-col>
        </el-row>

        <el-button  type="primary" @click="handleUpdate">保存数据</el-button>


      </el-form>
    </el-dialog>
</div>

  </div>
</template>
<script>
// 导入team api
import team from "../../../api/admin/team";
import axios from "axios";

export default {
  // 必须使用方法，需要给返回值
  data(){
    return {
      fom:{},
      dataList:[],
      dataTeamList:[],
      dataPackageList:[],
      packages:[],
      editFormView:false,
      organization:{},
      labels:{},
      packageIds:[],
      labelbj:{},
      editfrom:{},
    }
  },
  created(){
    this.getList();
    this.getLis();
  },
  methods:{
    // 页面初始化查询数据
    getList(value){

      axios.get("http://localhost:8080/team/"+ this.$route.params.id).then(res=>{

        this.fom = res.data.data;
        console.log(this.fom);

   })

      axios.get("http://localhost:8080/doctor/team/"+this.$route.params.id).then(res=>{
        this.dataTeamList = res.data.data;
        console.log(this.dataTeamList)
      })





      if(value == -1){
        // 点击搜索之后应该从第一页开始查询
        this.currentPage = 1;
      }

      // 此处应该调用api里面的相关方法 getList
     /* team.getList(this.currentPage, this.pageSize, this.querySearchTeamVo).then(res => {
        // 以前要获取响应的数据  res.data  拿到的此时result对象
        // 此处 res就是result对象
        console.log(res);
        // 将查询出来的分页数据赋值给数据模型
        this.dataList = res.data.data;
        this.total = res.data.total;
      });*/
    },

    getLabel(id){
      for (let i =0 ;i<this.labelbj.length;i++){
        if (this.labelbj[i].id == id)return this.labelbj[i].name

      }
    },


    getLis(){
      axios.get("http://localhost:8080/organization").then(res=>{
        console.log("ssssssssssssssssssssssssss"+res.data)
        this.organization = res.data.data;
      })

      axios.get("http://localhost:8080/team/team/label/"+this.$route.params.id).then(res=>{
        this.labels = res.data.data
        console.log(res+"labelslabelslabelslabelslabelslabelslabelslabels")
        console.log(this.labels)

      })

      axios.get("http://localhost:8080/label").then(res=>{
        this.labelbj = res.data.data
        console.log(this.labels+"ssssssdasdjkhgasjdhksagjyhydgkajsmygdfjysagkfjgasdkjmyfgjhkydsgfjhkdsgkufgdsku")
      })

      axios.get("http://localhost:8080/team/team/package/"+this.$route.params.id).then(res=>{
        this.packageIds = res.data.data
        //packageIds[i].packageId
        console.log(res.data.data+"dddddddddddddddddddddddddddddddddddddddddddddddddddd")
        for(let i=0;i<this.packageIds.length;i++){
          axios.post('http://localhost:8080/package/search/'+1+'/'+100,{other:{id:this.packageIds[i].packageId}}).then(r=>{
            this.packages.push(r.data.data.data[0])
          })
        }
        console.log(this.packages)


      })



    },    //上传成功后触发执行
    handleAvatarSuccess(res, file) {
      this.fom.img ="http://rj0158yod.hd-bkt.clouddn.com/"+ res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpeg'|| file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

    handleUpdate(){
      this.editfrom = this.fom
      this.editfrom.jgName = this.organization.name
      this.editfrom.label= this.labelbj.id
      this.editFormView = false
      team.edit(this.editfrom).then(res=>{
        this.$router.push("/team/detail/:id")
      })

/*      axios.put("http://localhost:8080/label").then(res=>{

      })*/

    }

    //返回列表

  }
}
</script>








